<template>
    <div class="header-box">
      <el-row>
        <el-col :span="3">
          <i class="el-icon-arrow-left" @click="toRoute"></i>
        </el-col>
        <el-col :span="18" class="input">
          <slot name="header"></slot>
        </el-col>
        <el-col :span="3">
            <slot name="icon"></slot>
            <slot name="out"></slot>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: "ShopcarHeader",
    methods:{
        toRoute(){
            this.$router.go(-1)
        }
    }
  };
  </script>
  
  <style lang="less" scoped>
  .header-box {
    height: 100%;
    border-bottom: 0.5333vw solid #f1f1f1;
  }
  .el-row {
    height: 100%;
  }
  .el-col {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .input{
    padding: 1.6vw 0;
  }
  .el-icon-arrow-left{
    font-size: 5.8666vw;
    font-weight: bold;
    color: #6b6d77;
  }
  .el-icon-more{
    font-size: 4.2666vw;
    color: #6b6d77;
  }
  </style>